<template>
  <!-- 外层el-row  el-col span offset 目的是实现 以下内容整体缩小左右居中于页面-->
  <!-- 可以去掉外层el-row el-row , 直接用div包裹, 设置div宽高,并且 左右居中.-->
  <div class="wrapdiv">
  <el-row justify="center" type="flex">
    <el-col :span="20">
      <el-row class="myaddrow">
        <el-col>
          <el-button @click="addUser">添 加</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-table
            ref="multipleTable"
            :data="userInfoList"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column type="index" width="100"> </el-table-column>
            <el-table-column prop="user_id" label="id" width="350">
            </el-table-column>

            <el-table-column prop="user_name" label="用户名">
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <!-- <div>
                <i class="el-icon-setting" @click="edit_group(scope.row.id)"></i>
              </div> -->
                <el-tooltip
                  content="修改用户信息"
                  placement="left-start"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    :plain="true"
                    size="small"
                    icon="el-icon-edit"
                    @click="editGroup(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-button
                  type="danger"
                  :plain="false"
                  size="small"
                  icon="el-icon-delete"
                  @click="deleteUser(scope.row.user_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div>
        <User_edit_dialog
          :dialogformvisible_edit.sync="dialogformvisible_edit"
          :is_add="is_add"
          :user_info="user_info"
        />
      </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
// import { mapMutations, mapState } from "vuex";
import User_edit_dialog from "../components/User_edit_dialog.vue";
export default {
  name: "User_list",
  data() {
    return {
      dialogformvisible_edit: false,
      cur_group_id: null,
      is_add: false,
      user_info: {
        user_id: "",
        user_name: "",
        user_pass: "",
      },
      // 列表
      userInfoList: [],
    };
  },
  computed: {
    // ...mapState([
    //   'userInfoList'
    // ])
  },
  watch: {
    dialogformvisible_edit(v, oldval) {
      console.log("dialogformvisible_edit==${v}");
      if (v == false) this.getUsers();
    },
    // user_info:{
    //   handler(nv,ov){
    //    console.log( 'user_info 改变了',nv.user_name)
    //   },
    //   deep:true
    // }
  },
  components: {
    User_edit_dialog,
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    // ...mapMutations([
    //   'setGroupList'
    // ]),

    async getUsers() {
      let ret = await this.$http.get(`users?`);

      let { users } = ret.data.data;
      console.log(users);
      this.userInfoList = users;
    },
    addUser() {
      // this.user_info.user_id = "";
      // this.user_info.user_name = "";
      // this.user_info.user_pass = "";
      this.is_add = true;
      this.dialogformvisible_edit = true;
      //子组件里的涉及到用户密码的地方,浏览器会自动填充,
      //进而修改了传过去的user_info, 所以 如果不延时修改, 则 看不到效果.
      //2021-8-30
      setTimeout(() => {
        this.user_info = {};
      }, 1000);
    },
    editGroup(user_info) {
      this.is_add = false;
      this.user_info = user_info;
      this.dialogformvisible_edit = true;
      console.log("eidt", user_info);
    },
    deleteUser(user_id) {
      this.$confirm("确认删除用户？")
        .then(async (_) => {
          console.log("delete", user_id);
          //发起网络请求
          let ret = await this.$http.delete(`users/${user_id}`);
          console.log(ret);
          let { action, result } = ret.data.data;
          console.log(action, result);
          if (result == "ok") this.$message.success("删除用户成功");
          else this.$message.error("删除失败");
          this.getUsers();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
/* 用div包裹时的左右居中设置,*/
/* .mydiv {
  width: 1300px;
  height: 600px;
  margin: 20px auto;
} */
.myaddrow {
  margin-bottom: 30px;
}
.wrapdiv{
  width: 98%;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  padding: 10px;
}
</style>
